import React, {Component, useEffect, useRef, useState} from 'react';
import {Button} from "antd";
import styled from "styled-components";

const ImageStyle = styled.img`
  width: 100%;
  height: 100%;
  display: block;
`

const PointStyle = styled.div`
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: rgba(121, 121, 121, .8);
  position: absolute;
`

const PointIndexStyle = styled.div`
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  background-color: #fff;
`

function PointImage(props) {
  const {value = '', onBulkChange, width, height, data, render} = props;
  const [point, setPoint] = useState(data.point_data || []);

  useEffect(() => {
    setPoint(point);
    onBulkChange({point_data: point})
  }, [point])

  return <div>
    {!!value && <div style={{width: width + 'px', height: height + 'px', position: 'relative'}} onClick={ev => {
      const [rect] = ev.currentTarget.getClientRects();
      const item = {x: ev.pageX - rect.left - 17, y: ev.pageY - rect.top - 17, index: point.length + 1};
      setPoint(p => [...p, item])
    }}>
      <ImageStyle src={value} alt=""/>
      {
        point.map((item, index) =>
          <PointStyle key={item.index} onClick={(ev) => {
            const p = point.filter(v => !(v.x === item.x && v.y === item.y))
            setPoint(p);
            ev.stopPropagation();
          }} style={{
            left: item.x + 'px',
            top: item.y + 'px'
          }}>
            <PointIndexStyle>{item.index}</PointIndexStyle>
          </PointStyle>)
      }
    </div>}
  </div>
}

export default PointImage;
